<template>
  <!-- 卡片视图区 -->
  <el-card>
    <el-row :gutter="25" type="flex" justify="center">
		<el-col :span="7">
				<!-- 搜索添加 -->
			<el-input placeholder="请输入搜索学生的学号" v-model="SearchForm.studentNo" prefix-icon="el-icon-reading"></el-input>
		</el-col>

		<el-col :span="4">
				<el-button type="primary" @click="search">搜索</el-button>
		</el-col>
	</el-row><br>

    <!-- 列表 -->
    <!-- always-on 当长度超过500时自动启用滚轮 -->
    <el-table
      scrollbar-always-on 
      height="500"
      :data="StuList"
      border
      stripe
      v-loading="isLoading"
      element-loading-background="rgba(255, 255, 255, .5)"
      element-loading-text="加载中，请稍后..."
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column
        label="记录号"
        type="index"
        fixed="left"
        width = 80
      ></el-table-column>
      <el-table-column label="学生学号" prop="StudentNo"></el-table-column>
      <el-table-column label="学生姓名" prop="StudentName"></el-table-column>
      <el-table-column label="学院" prop="AcademyName"></el-table-column>
      <el-table-column label="班级" prop="ClassName"></el-table-column>
      <el-table-column label="班级号" prop="ClassNo"></el-table-column>
      <el-table-column label="测试时间" prop="CreateAt" width="420"></el-table-column>
      <el-table-column label="人格" prop= "MBTI" > </el-table-column>
      <el-table-column label="查看选项" fixed="right">
        <template #default="scope">
          <el-button class="reset-margin" link type="info" @click="show(scope.row.CreateAt)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog title="选择结果" v-model="ansVisible" width="550px">
   <el-scrollbar height="350px">
       <el-table table-layout="auto" :data="choice" height="250" style="width: auto" :header-cell-style="{ background: '#fafafa', color: '#606266', }" :default-sort="{ prop: 'No', order: 'acending' }">a 
       <el-table-column prop="No" label="题号" width="120" align="center" /> 
       <el-table-column prop="ch" label="选项内容" width="350" align="center" />
      
      </el-table>
  </el-scrollbar>
</el-dialog>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      SearchForm: {
        studentNo: "",
      },
      StuList: [], // 用户列表
      total: 0, // 最大数据记录
      ansVisible:false,
      choice:[],
    };
  },
  methods: {
    async search() {
      // 调用post请求
      this.isLoading = true;
      const { data: res } = await this.$http.post("api/searchbyno", this.SearchForm);
      console.log(res.data.Result);
      // console.log(res.data.Total);
      // console.log(res.msg);
      if (res.data.Total == 0) {
        this.$message.error("用户名错误或该用户无记录");
        this.isLoading = false;
      }
      else {
          this.$message.success(res.msg)
          this.StuList = res.data.Result; // 将返回数据赋值
          this.total = res.data.Total; // 总个数
          this.isLoading = false;
      }
    },
    show(CreateAt){
      this.ansVisible = true;
      var ans = ""
      for(var i = 0; i<this.StuList.length;i++){
        if(this.StuList[i].CreateAt == CreateAt){
          ans = this.StuList[i].Answer
        }
      }
      for(i = 0;i<ans.length;i++){
        let each = {"No":i+1, "ch":""}
        each.ch = ans[i]
        this.choice[i]= each
      }
      console.log(this.choice)
    },
  },
};
</script>

<style>
</style>
